<template>
    <a-modal title="重新设定密码" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" style="top:20px;">
        <a-spin :spinning="confirmLoading">
            <a-form :form="form">

                <a-form-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input placeholder="请输入用户账号" v-decorator="[ 'userName', {}]" :readOnly="true" />
                </a-form-item>

                <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                    <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'passwd', validatorRules.passwd]" @blur="handlePswBlur" />
                </a-form-item>

                <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback>
                    <a-input type="password" @blur="handlePswBlur" placeholder="请重新输入登录密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]" />
                </a-form-item>

            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
import { resetPassword } from '@/api/api';
import { hex_md5 } from '@/util/md5'
export default {
    name: "PasswordModal",
    data() {
        return {
            visible: false,
            confirmLoading: false,
            confirmDirty: false,
            validatorRules: {
                passwd: {
                    rules: [{
                        required: true,
                        pattern: /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/,
                        message: '密码由8位数字、大小写字母和特殊符号组成!'
                    }, {
                        validator: this.validateToNextPassword,
                    }],
                },
                confirmpassword: {
                    rules: [{
                        required: true, message: '请重新输入登录密码!',
                    }, {
                        validator: this.compareToFirstPassword,
                    }],
                },
            },

            model: {},

            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            form: this.$form.createForm(this)
        }
    },
    created() {
        //console.log("created");
    },

    methods: {
        show(param) {
            this.form.resetFields();
            this.visible = true;
            this.model = param;
            this.$nextTick(() => {
                this.form.setFieldsValue({ userName: param.userName });
            });
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.disableSubmit = false;
            this.selectedRole = [];
        },
        handleSubmit() {
            // 触发表单验证
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true;
                    let formData = Object.assign(this.model, values);
                    resetPassword(
                        formData.id,
                        hex_md5(formData.passwd)
                    ).then((res) => {
                        if (res.code == 200) {
                            this.$message.success("操作成功!");
                            this.$emit('ok');
                        } else {
                            this.$message.warning(res.message);
                        }
                    }).finally(() => {
                        this.confirmLoading = false;
                        this.close();
                    });
                }
            })
        },
        handleCancel() {
            this.close()
        },
        validateToNextPassword(rule, value, callback) {
            const form = this.form;
            const confirmpassword = form.getFieldValue('confirmpassword');
            //console.log("confirmpassword==>",confirmpassword);
            if (value && confirmpassword && value !== confirmpassword) {
                callback('两次输入的密码不一样！');
            }
            callback();
        },
        compareToFirstPassword(rule, value, callback) {
            const form = this.form;
            const passwd = form.getFieldValue('passwd');

            if (value && passwd && value !== passwd) {
                callback('两次输入的密码不一样！');
            }
            callback();
        },
        handlePswBlur(e) {
            const form = this.form;
            const passwd = form.getFieldValue('passwd');
            const confirmpassword = form.getFieldValue('confirmpassword');

            if (passwd && confirmpassword) {
                form.validateFields(['confirmpassword'], { force: true })
                form.validateFields(['passwd'], { force: true })
            }
        }
    }
}
</script>